<template>
	<view class="newly">
		<view class="name">
			<view class="cname">
				收件人
			</view>
			<input maxlength="4" type="text" class="uni-input" v-model="name" focus placeholder="收件人" />
		</view>
		<view class="name">
			<view class="cname">
				电话号码
			</view>
			<input class="uni-input" type="number" maxlength="11" v-model="tel" focus placeholder="收件人手机号" />
		</view>

		<view class="name">
			<view class="cname">
				快递地址
			</view>
			<view class="uni-input" @tap="chooseCity">{{region.label}}</view>

		</view>

		<view class="name">
			<view class="cname">
				详情地址
			</view>
			<input class="uni-input" v-model="detailed" focus placeholder="详情地址" />
		</view>
		<view class="name">
			<view class="cname">
				是否默认
			</view>
			<switch color="#354E44" class="switch" name="switch" :checked="isDefault" @change="isDefaultChange" />
		</view>

		<view class="newly-del" v-if="editType=='edit'" @tap="del">
			<button class="mini-del" type="default"  size="default">删除地址</button>
		</view>


		<view class="newly" @tap="save">
			<button class="mini-btn" type="default" size="default">保存地址</button>
		</view>
		<!-- 城市选择 -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue"
		 @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import orderApi from "@/api/order/index.js"

	// 城市组件
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker.vue"
	import cityData from '@/common/city.data.js';
	
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {

				editType: "edit",
				id: '',
				name: '',
				tel: '',
				detailed: '',

				isDefault: false,
				cityPickerValue: [0, 0, 0],
				themeColor: '#007AFF',
				region: {
					label: "请点击选择地址",
					value: [],
					cityCode: ""
				},
				address: {}

			}
		},
		methods: {
			 save() {
			      let data = {
			        name: this.name,
			        head: this.name.substr(0, 1),
			        tel: this.tel,
			        address: { region: this.region, detailed: this.detailed },
			        isDefault: this.isDefault
			      };
			      if (this.editType == "edit") {
			        data.id = this.id;
			      }
			      if (!data.name) {
			        uni.showToast({ title: "请输入收件人姓名", icon: "none" });
			        return;
			      }
			      if (!data.tel) {
			        uni.showToast({ title: "请输入收件人电话号码", icon: "none" });
			        return;
			      }
			      if (!data.address.detailed) {
			        uni.showToast({ title: "请输入收件人详细地址", icon: "none" });
			        return;
			      }
			      if (data.address.region.value.length == 0) {
			        uni.showToast({ title: "请选择收件地址", icon: "none" });
			        return;
			      }
			      uni.showLoading({
			        title: "正在提交"
			      });
			      // 构建可提交内容  吧cityCode和value拼接一块
			      var cityCodeArr = [];
			      cityCodeArr[0] = this.region.cityCode;
			      for (var i = 0; i < this.region.value.length; i++) {
			        cityCodeArr.push(this.region.value[i]);
			      }
				  var postData = {
					  userId: this.$store.getters.userId,
			          tag: "家",
			          name: data.name,
			          tel: data.tel,
			          cityCode: cityCodeArr.join(),
					  cityStr: this.region.label,
					  cityBak: this.detailed,
					  isUse: this.isDefault?1:0
			        }
				  var api = null;
				  if(this.id){
					  api = orderApi.addressUpdate;
					  postData.id = this.id;
				  }else{
					  api = orderApi.addressSave;
				  }
			      api(postData)
			        .then(res => {
						if(res.code == 'S'){
							uni.showToast({
								title:'保存成功!',
								duration:1000
							})
							uni.navigateTo({
								url:'../site'
							})
						}else{
							uni.showToast({
								title: '保存失败!',
								duration:1000
							})
						}
					});
			    },
				  onLoad(e) {
				    //获取传递过来的参数
				
				    this.editType = e.type;
				    if (e.type == "edit") {
						
						var addressObj = uni.getStorageSync("address");
						var cityArr = addressObj.address.region.value;
						cityArr = cityArr.map(item=>(item-0));
						this.id = addressObj.id;
						this.name = addressObj.name;
						this.tel = addressObj.tel;
						this.detailed = addressObj.address.region.detailed;
						this.isDefault = addressObj.isDefault;
						this.cityPickerValue = cityArr;
						this.region = addressObj.address.region;
				    }
				  },
				     del() {
						 
						orderApi.del({
								id:this.id
							}).then(res =>{
							
							if(res.code == "S"){
								uni.showToast({
								    title: '删除成功',
								    duration: 1000
								});
								setTimeout(() =>{
									uni.navigateTo({
									    url: '../site'
									});
								},1500 )
								
							}
						})
						 
					
					
						
				      },
					  
			onCancel(e) {
				console.log(e);
			},
			// 三级联动选择
		 chooseCity() {
		      this.$refs.mpvueCityPicker.show();
		    },
		    onConfirm(e) {
		      this.region = e;
		      this.cityPickerValue = e.value;
		    },

			// 设置默认地址
			isDefaultChange(e) {
				this.isDefault = e.detail.value;
			},
			
			
			  
		},
	}
</script>

<style lang="scss" scoped>
	.newly {
		.name {
			display: flex;
			margin-left: 30rpx;
			padding-top: 60rpx;

			.cname {
				font-family: PingFangSC-Semibold;
				font-size: 34rpx;
				color: #3E3E3E;
				letter-spacing: 1.86rpx;
			}

			.uni-input {
				margin-left: 30rpx;
				height: 50rpx;
				width: 500rpx;
				font-size: 30rpx;
				letter-spacing: 1.86rpx;
				// background: #fff;
				// height: 30rpx;
			}

			.switch {
				margin-left: 200px;
			}

		}

		.newly {
			position: absolute;
			width: 500rpx;
			bottom: 200rpx;
			margin-left: 125rpx;
			.mini-btn {
				width: 500rpx;
				color: #fff;
				border-radius: 30rpx;
				background: #354E44;
			}
		
		}
		.newly-del{
			
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			.mini-del{
			
			}
		}
	}
</style>
